import React, {Component} from 'react';
import {createBottomTabNavigator} from "react-navigation";
import ShopScreen         from "./ShopScreen";
import GameScreen         from "./GameScreen";
import MyScreen           from "./MyScreen";
import TabBarItem         from "../component/TabBarItem"
import WelfareScreen      from "./WelfareScreen";
import ScreenUtil         from "../utils/ScreenUtils";

export default createBottomTabNavigator({

    Welfare: {
        screen: WelfareScreen,
        navigationOptions: {
            tabBarLabel: '福利',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('../../res/images/tab/tab_home_normal.png')}
                    selectedImage={require('../../res/images/tab/tab_home_selected.png')}
                />
            ),
        }
    },
    Game: {
        screen: GameScreen,
        navigationOptions: {
            tabBarLabel: '游戏',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('../../res/images/tab/tab_game_normal.png')}
                    selectedImage={require('../../res/images/tab/tab_game_selected.png')}
                />
            ),
        }
    },
    Shop: {
        screen: ShopScreen,
        navigationOptions: {
            tabBarLabel: '商城',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('../../res/images/tab/tab_shop_normal.png')}
                    selectedImage={require('../../res/images/tab/tab_shop_selected.png')}
                />
            ),
        }
    },
    My: {
        screen: MyScreen,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('../../res/images/tab/tab_my_normal.png')}
                    selectedImage={require('../../res/images/tab/tab_my_selected.png')}
                />
            ),
        }
    },

    }, {
        initialRouteName: 'Welfare', // 设置默认的页面组件
        initialRouteParams: {title:'Welfare'},

        lazy: true, // 在app打开的时候将底部标签栏全部加载，默认false, 推荐改成true
        backBehavior: null, // 点击返回退到上级界面

        tabBarOptions: {
            activeTintColor: '#ff4114', // 选中的颜色
            inactiveTintColor: '#353535', // 未选中的颜色

            showLabel: true,
            showIcon: true,
            style: {
                backgroundColor:'white',
                height:49,
            },
            tabStyle: {
                height:49,
            },
            labelStyle: {
                fontSize:ScreenUtil.scaleSize(24),
            },
        }
    },
);

/**
 * Tab点击跳转调用的公共方法
 */
const route = (navigation) => {
    if (!navigation.isFocused()) {
        navigation.navigate(navigation.state.routeName, {
            title: navigation.state.routeName
        })
    }
};
